<template>
  <div>
    <div v-show="!isShowAds">
      <jxf-titletip :title="title" @refreshPage="refreshFuc"></jxf-titletip>
      <el-card class="mt20">
        <el-form :inline="true" :model="searchInfo" ref="searchInfo">
          <el-form-item label="广告名称:" prop="name">
            <el-input v-model.trim="searchInfo.name" clearable @keyup.enter.native="onSearch"></el-input>
          </el-form-item>
          <el-form-item label="展示对象:" prop="terminal">
            <el-select v-model.trim="searchInfo.terminal" clearable placeholder="全部">
              <el-option label="全部" value="0"></el-option>
              <el-option label="买家端" value="1"></el-option>
              <el-option label="卖家端" value="2"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="到期时间:" prop="endTime">
            <el-date-picker
              v-model="searchInfo.endTime"
              type="datetime"
              placeholder="选择日期时间"
              value-format="yyyy-MM-dd HH:mm:ss">
            </el-date-picker>
          </el-form-item>
          <el-form-item label="启动状态:" prop="status">
            <el-select v-model="searchInfo.status" clearable placeholder="全部">
              <el-option label="上线" value="1"></el-option>
              <el-option label="下线" value="0"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="onSearch()">搜索</el-button>
          </el-form-item>
          <el-form-item>
            <el-button type="info" @click="resetForm('searchInfo')">重置</el-button>
          </el-form-item>
        </el-form>
      </el-card>
      <el-card class="jxf-table-card mt20">
        <div slot="header" class="clearfix">
          <span>数据列表</span>
          <div>
            <el-button type="primary" @click="operateBanner('1', {})">添加广告</el-button>
          </div>
        </div>
        <jxf-table class="" :table="dataTable">
          <template slot="status" slot-scope="notice">
            <el-switch
              v-model="notice.row.status == 0 ? false : true"
              active-color="#13ce66"
              inactive-color="#ff4949" disabled>
            </el-switch>
          </template>
          <template slot="imgUrl" slot-scope="notice">
            <viewer :images="notice.row.imgUrl ? notice.row.imgUrl.split(',') : []">
              <div> <img :src="notice.row.imgUrl" /></div>
            </viewer>
          </template>
          <template slot="terminal" slot-scope="notice">
            <div v-if="notice.row.terminal == '0'">全部</div>
            <div v-if="notice.row.terminal == '1'">买家端</div>
            <div v-if="notice.row.terminal == '2'">卖家端</div>
          </template>
          <template slot="time" slot-scope="notice">
            <div>开始时间：{{notice.row.startTime}}</div>
            <div>结束时间：{{notice.row.endTime}}</div>
          </template>
          <template slot="operation" slot-scope="notice">
            <el-button type="text" @click="operateBanner('0', notice.row)">编辑</el-button>
            <el-button type="text" @click="deleteItem(notice.row)">删除</el-button>
          </template>
        </jxf-table>
      </el-card>
      <jxf-pagination class="mt20" :pageTotal="pageTotal" :currentPage.sync='currentPage' :pageSize.sync="pageSize"
                      @currentPageChange="currentPageChange" @pageSizeChange="pageSizeChange"></jxf-pagination>
    </div>
    <AddAds v-if="isShowAds" @goBack="goBack" @fresh="fresh" :dataInfo="dataInfo" :title="SubTitle"></AddAds>
  </div>
</template>

<script>
  import AddAds from './components/AddAds'
  import FormatDate from '@/assets/js/formatDate'
    export default {
        name: "AdvertisingList",
        components: { AddAds },
        data() {
          return {
            title: "广告列表",
            searchInfo: {
              name: "",
              terminal: "",
              endTime: "",
              status: null
            },
            dataInfo: {},
            SubTitle: "",
            FormatDate: FormatDate,
            isShowAds: false,
            dataTable: {
              border:true,
              loading:false,
              hasSelect:false,
              hasOperation:false,
              tr: [
                {
                  id: '2',
                  label: '广告名称',
                  prop: 'name'
                },
                {
                  id: '3',
                  label: '广告位置',
                  prop: 'sort'
                },
                {
                  id: '4',
                  label: '展示对象',
                  show: 'template',
                  prop: 'terminal'
                },
                {
                  id: '5',
                  label: '广告图片',
                  show: 'template',
                  width: '140',
                  prop: 'imgUrl'
                },
                {
                  id: '6',
                  label: '时间',
                  width: '240',
                  show: 'template',
                  prop: 'time'
                },
                {
                  id: '7',
                  label: '上线/下线',
                  show: 'template',
                  width:"100",
                  prop: 'status'
                },
                {
                  id: '8',
                  label: '点击次数',
                  prop: 'clicks'
                },
                {
                  id: '9',
                  label: '操作',
                  show: 'template',
                  width: "120",
                  fixed: "right",
                  prop: 'operation'
                }
              ],
              operation: [],
              data: []
            },
            pageTotal:0,
            pageSize:10,
            currentPage:2
          }
        },
        methods: {
          getData() {
            this.dataTable.loading = true;
            let data = {
              ...this.searchInfo,
              pageNum: this.currentPage,
              pageSize: this.pageSize
            };
            ajax.post(apis.operate.getAdvlist, data).then(result => {
              if(result.code === '10000000') {
                this.dataTable.data = result.data.dataList;
                this.pageTotal = result.data.total
              } else {
                this.$message.error(result.message)
              }
              this.dataTable.loading = false
            })
          },

          fresh() {
            this.getData();
          },

          // 删除
          deleteItem(obj) {
            // 删除;
            let data = {
              id: obj.id,
              isDelete: 1
            };
            this.$confirm('此操作将删除此广告, 是否继续?', '删除广告', {
              confirmButtonText: '确定',
              cancelButtonText: '取消',
              type: 'warning'
            }).then(() => {
              ajax.post(apis.operate.operateAdv, data).then(result => {
                if(result.code === '10000000') {
                  this.$message({
                    type: 'success',
                    message: '删除成功!'
                  });
                  this.getData();
                } else {
                  this.$message.error(result.message)
                }
              })

            }).catch(() => {
              this.$message({
                type: 'info',
                message: '已取消'
              });
            });
          },

          refreshFuc() {
            this.resetForm('searchInfo');
            this.pageSize = 10;
            this.currentPage = 1;
            this.getData()
          },

          resetForm(formName) {
            this.$refs[formName].resetFields();
          },

          onSearch() {
            this.currentPage = 1;
            this.getData();
          },

          operateBanner(type, obj) {
            if(type === '1') {
              this.SubTitle = "添加广告";
              this.dataInfo = {
                clicks: null,
                createTime: "",
                endTime: "",
                id: null,
                imgUrl: "",
                linkUrl: null,
                name: "",
                remark: "",
                sort: "",
                startTime: "",
                status: "1",
                terminal: ''.toString()
              }
            } else {
              this.SubTitle = "编辑广告";
              this.dataInfo = obj
            }
            if(this.dataInfo.status === 0 || this.dataInfo && this.dataInfo.terminal || this.dataInfo.terminal === 0) {
              this.dataInfo.terminal = this.dataInfo.terminal.toString()
            }
            if(this.dataInfo.status === 0 || this.dataInfo && this.dataInfo.status) {
              this.dataInfo.status = this.dataInfo.status.toString()
            }
            this.isShowAds = true;
          },

          // 切换页面
          currentPageChange(pageNo) {
            this.currentPage = pageNo;
            this.getData()
          },

          // 切换页面条数
          pageSizeChange(pageNo) {
            this.pageSize = pageNo;
            this.getData()
          },

          goBack() {
            this.dataInfo = {};
            this.isShowAds = false
          }
        },
        created() {
          this.onSearch()
        }
    }
</script>

<style lang="scss" scoped>
.jxf-table-card {
  img {
    width: 120px;
    height: 120px;
  }
}
</style>
